<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="../css/index.css" />
		<script src="../js/vue.js"></script>
		<script src="../js/elementui.js"></script>

		<style>
			.el-select .el-input {
				width: 130px;
			}

			.input-with-select .el-input-group__prepend {
				background-color: #fff;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<el-input v-model="input" placeholder="请输入内容"></el-input>
			<hr />
			<el-input placeholder="请输入内容" v-model="input2" :disabled="true"></el-input>
			<hr />
			<el-input placeholder="请输入内容" v-model="input3" clearable></el-input>
			<hr />
			<el-input placeholder="请输入密码" v-model="input4" show-password></el-input>
			<hr />
			<div class="demo-input-suffix">
				属性方式：
				<el-input placeholder="请选择日期" suffix-icon="el-icon-date" v-model="input1_1">
				</el-input>
				<el-input placeholder="请输入内容" prefix-icon="el-icon-search" v-model="input1_2">
				</el-input>
			</div>
			<div class="demo-input-suffix">
				slot 方式：
				<el-input placeholder="请选择日期" v-model="input1_3">
					<i slot="suffix" class="el-input__icon el-icon-date"></i>
				</el-input>
				<el-input placeholder="请输入内容" v-model="input1_4">
					<i slot="prefix" class="el-input__icon el-icon-search"></i>
				</el-input>
			</div>
			<hr />
			<el-input type="textarea" :rows="2" placeholder="请输入内容" v-model="textarea">
			</el-input>
			<hr />
			<el-input type="textarea" autosize placeholder="请输入内容" v-model="textarea1">
			</el-input>
			<div style="margin: 20px 0;"></div>
			<el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4}" placeholder="请输入内容" v-model="textarea2">
			</el-input>
			<hr />
			<div>
				<el-input placeholder="请输入内容" v-model="input2_1">
					<template slot="prepend">Http://</template>
				</el-input>
			</div>
			<div style="margin-top: 15px;">
				<el-input placeholder="请输入内容" v-model="input2_2">
					<template slot="append">.com</template>
				</el-input>
			</div>
			<div style="margin-top: 15px;">
				<el-input placeholder="请输入内容" v-model="input2_3" class="input-with-select">
					<el-select v-model="select" slot="prepend" placeholder="请选择">
						<el-option label="餐厅名" value="1"></el-option>
						<el-option label="订单号" value="2"></el-option>
						<el-option label="用户电话" value="3"></el-option>
					</el-select>
					<el-button slot="append" icon="el-icon-search"></el-button>
				</el-input>
			</div>
			<hr />
			<div class="demo-input-size">
				<el-input placeholder="请输入内容" suffix-icon="el-icon-date" v-model="input3_1">
				</el-input>
				<el-input size="medium" placeholder="请输入内容" suffix-icon="el-icon-date" v-model="input3_2">
				</el-input>
				<el-input size="small" placeholder="请输入内容" suffix-icon="el-icon-date" v-model="input3_3">
				</el-input>
				<el-input size="mini" placeholder="请输入内容" suffix-icon="el-icon-date" v-model="input3_4">
				</el-input>
			</div>
		</div>
	</body>

	<script>
		new Vue({
			el: "#app",
			data: {
				input: '',
				input2: '',
				input3: '',
				input4: '',
				input1_1: '',
				input1_2: '',
				input1_3: '',
				input1_4: '',
				textarea: '',
				textarea1: '',
				textarea2: '',
				input2_1: '',
				input2_2: '',
				input2_3: '',
				select: '',
				input3_1: '',
				input3_2: '',
				input3_3: '',
				input3_4: ''
			}
		})
	</script>

</html>